{extend name='common@layout/seller' /}
{block name="left"}{include file='goods/left'}{/block}
{block name="breadcrumb"}
<div class="ncsc-path"><i class="icon-desktop"></i>商家管理中心<i class="icon-angle-right"></i>商品<i class="icon-angle-right"></i>图片空间</div>
{/block}
{block name='content'}
<div class="tabmenu">
    <ul class="tab pngFix">
        <li class="normal"><a  href="{:url('seller/album/index')}">我的相册</a></li>
        <li class="active"><a>图片列表</a></li>
        <!--to do<li class="normal"><a  href="index.php?act=store_album&op=store_watermark">水印管理</a></li>-->
    </ul>
    <a id="open_uploader" href="JavaScript:void(0);" class="ncsc-btn ncsc-btn-acidblue"><i class="icon-cloud-upload"></i>上传图片</a>
    <div class="upload-con" id="uploader" style="display: none;">
        <form method="post" action="" id="fileupload" enctype="multipart/form-data">
            <input type="hidden" name="category_id" id="category_id" value="{$album.aclass_id}">
            <div class="upload-con-div">选择文件：
                <div class="ncsc-upload-btn"> <a href="javascript:void(0);"><span>
                            <input type="file" hidefocus="true" size="1" class="input-file" name="file" multiple="multiple"/>
                        </span>
                        <p><i class="icon-upload-alt"></i>上传图片</p>
                    </a> </div>
            </div>
            <div nctype="file_msg"></div>
            <div class="upload-pmgressbar" nctype="file_loading"></div>
            <div class="upload-txt"><span>支持Jpg、Gif、Png格式，大小不超过1024KB的图片上传；浏览文件时可以按住ctrl或shift键多选。</span> </div>
        </form>
    </div>
</div>
<div id="pictureFolder" class="ncsc-picture-folder">
    <dl class="ncsc-album-intro">
        <dt class="album-name">{$album.aclass_name}</dt>
        <dd class="album-covers">
            <img alt="{$album.aclass_name}" id="aclass_cover" src="{$album.aclass_cover|img_url=60}" onerror='this.src="/old/data/upload/shop/common/default_goods_image_60.gif"'>
        </dd>
        <dd class="album-info"></dd>
    </dl>
    
    {notempty name='pics'}
    <table class="search-form">
        <tbody>
            <tr>
                <th>批量处理</th>
                <td>          
                    <a href="JavaScript:void(0);" class="ncsc-btn-mini" onClick="checkAll()"><i class="icon-check"></i>全选</a>
                    <a href="JavaScript:void(0);" class="ncsc-btn-mini" onClick="uncheckAll()"><i class="icon-check-sign"></i>取消</a>
                    <a href="JavaScript:void(0);" class="ncsc-btn-mini" onClick="switchAll()"><i class="icon-check-empty"></i>反选</a>
                    <a href="JavaScript:void(0);" class="ncsc-btn-mini" onClick="submit_form('del')"><i class="icon-trash"></i>删除</a>
                    <!--to do
                    <a href="JavaScript:void(0);" class="ncsc-btn-mini" id="img_move"><i class="icon-move"></i>转移相册</a>
                    <a href="JavaScript:void(0);" class="ncsc-btn-mini" onClick="submit_form('watermark')"><i class=" icon-paste"></i>添加水印</a>
                    -->
                    <dl>
                        <dd id="batchClass" style=" display:none;">
                            <span>选择相册：</span>
                            <select name="cid" id="cid" style="width:100px;">
                                {foreach $lists as $one}
                                <option style="width:80px;" value="{$one.aclass_id}" >{$one.aclass_name}</option>
                                {/foreach}
                            </select>
                            <input type="button" onClick="submit_form('move')" value="开始转移" />
                        </dd>
                    </dl>
                </td>
                <th>排序方式</th>
                <td class="w100">          
                    <form name="select_sort" id="select_sort">
                        <input type="hidden" name="s" value="seller/album/pic_list" />
                        <input type="hidden" name="id" value="{$album.aclass_id}" />
                        <select name="sort" id="img_sort">
                            <option value="0">按上传时间从晚到早</option>
                            <option value="1" {eq name='sort' value='1'}selected{/eq}>按上传时间从早到晚</option>
                            <!--<option value="2" {eq name='sort' value='2'}selected{/eq}>按图片从大到小</option>
                            <option value="3" {eq name='sort' value='3'}selected{/eq}>按图片从小到大</option>
                            <option value="4" {eq name='sort' value='4'}selected{/eq}>按图片名降序</option>
                            <option value="5" {eq name='sort' value='5'}selected{/eq}>按图片名升序</option>-->
                        </select>
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
    <form name="checkboxform" id="checkboxform" method="POST" action="">
        <div class="ncsc-picture-list">
            <div class="alert alert-info"> <strong>注：在使用‘替换上传’功能时，请保持图片的扩展名与被替换图片相同。</strong> </div>
            <ul>
                {foreach $pics as $one}
                <li>
                    <dl>
                        <dt>
                            <div class="picture">
                                <a href="javascript:;">
                                    <img alt="{$one.apic_name}" id="img_{$one.apic_id}" src="{$one.apic_cover|img_url=360}" onerror='this.src="/old/data/upload/shop/common/default_goods_image_240.gif"'>
                                </a>
                            </div>
                            <input id="C{$one.apic_id}" name="id[]" value="{$one.apic_id}" type="checkbox" class="checkbox"/>
                            <input id="{$one.apic_id}" class="editInput1" readonly onDblClick="$(this).unbind();_focus($(this));" value="{$one.apic_name}" title="双击名称可以进行编辑" style="cursor:pointer;">
                            <span onDblClick="_focus($(this).prev());" title="双击名称可以进行编辑"><i class="icon-pencil"></i></span></dt>
                        <dd class="date">
                            <p>上传时间：{$one.upload_time|date="Y-m-d", ###}</p>
                            <p>原图尺寸：{$one.apic_spec|default="-"}</p>
                        </dd>
                        <dd class="buttons">
                            <div class="upload-btn">
                                <a href="javascript:void(0);"> 
                                    <span>
                                        <input type="file" name="file_{$one.apic_id}" id="file_{$one.apic_id}" class="input-file" size="1" hidefocus="true" nctype="replace_image" />
                                    </span>
                                    <div class="upload-button"><i class="icon-upload-alt"></i>替换上传</div>
                                    <input id="submit_button" style="display:none" type="button" value="" onClick="submit_form($(this))" />
                                </a>
                            </div>
                            <!--
                            <a href="JavaScript:void(0);" nc_type="dialog" dialog_title="转移相册" uri="index.php?act=store_album&op=album_pic_move&cid=40&id=1376">
                                <i class="icon-move"></i>转移相册
                            </a> 
                            -->
                            <a href="JavaScript:void(0);" onclick="cover({$one.apic_id})">
                                <i class="icon-picture"></i>设为封面
                            </a> 
                            <a href="javascript:void(0)" onclick="ajax_get_confirm('您确定进行该操作吗?\n注意：使用中的图片也将被删除', '/?s=seller/album/pic_del&id={$one.apic_id}');">
                                <i class="icon-trash"></i>删除图片
                            </a> 
                        </dd>
                    </dl>
                </li>
                {/foreach}
            </ul>
        </div>
    </form>
    {$pics->render()}
    {else /}
    <div class="warning-option"><i class="icon-warning-sign">&nbsp;</i><span>暂无符合条件的数据记录</span></div>
    {/notempty}
</div>
<script type="text/javascript" src="/old/data/resource/js/fileupload/jquery.iframe-transport.js?v1.2" charset="utf-8"></script>
<script type="text/javascript" src="/old/data/resource/js/fileupload/jquery.ui.widget.js?v1.2" charset="utf-8"></script>
<script type="text/javascript" src="/old/data/resource/js/fileupload/jquery.fileupload.js?v1.2" charset="utf-8"></script>
<script>
                                $(function () {
                                    $(".ncsc-picture-list ul li").hover(function () {
                                        $(this).addClass("hover");
                                    }, function () {
                                        $(this).removeClass("hover");
                                    });
                                    $(".ncsc-picture-list > ul > li").jfade({
                                        start_opacity: "1",
                                        high_opacity: "1",
                                        low_opacity: ".5",
                                        timing: "200"
                                    });

                                    $('input[nctype="replace_image"]').each(function () {
                                        $(this).fileupload({
                                            dataType: 'json',
                                            url: '/?s=seller/album/replace_image_upload&id=' + $(this).attr('id'),
                                            done: function (e, data) {
                                                var param = data.result;
                                                if (param.state == 'true') {
                                                    img_refresh(param.id);
                                                    location.href = location.href;
                                                } else {
                                                    alert(param.message);
                                                }
                                            }
                                        });
                                    });


                                    var upload_num = 0;
                                    $('#fileupload').fileupload({
                                        dataType: 'json',
                                        url: '/?s=seller/album/image_upload',
                                        add: function (e, data) {
                                            $.each(data.files, function (index, file) {
                                                $('<div nctype=' + file.name.replace(/\./g, '_') + '><p>' + file.name + '</p><p class="loading"></p></div>').appendTo('div[nctype="file_loading"]');
                                            });
                                            data.submit();
                                        },
                                        done: function (e, data) {
                                            var param = data.result;
                                            $this = $('div[nctype="' + param.origin_file_name.replace(/\./g, '_') + '"]');
                                            $this.fadeOut(3000, function () {
                                                $(this).remove();
                                                if ($('div[nctype="file_loading"]').html() == '') {
                                                    setTimeout("window.location.reload()", 1000);
                                                }
                                            });
                                            if (param.state == 'true') {
                                                upload_num++;
                                                $('div[nctype="file_msg"]').html('<i class="icon-ok-sign">' + '</i>' + '成功上传' + upload_num + '张图片');

                                            } else {
                                                $this.find('.loading').html(param.message).removeClass('loading');
                                            }
                                        }
                                    });
                                });
                                function img_refresh(id) {
                                    $('#img_' + id).attr('src', $('#img_' + id).attr('src') + "?" + 100 * Math.random());
                                }

                                function checkAll() {
                                    $('#batchClass').hide();
                                    $('input[type="checkbox"]').each(function () {
                                        $(this).attr('checked', true);
                                    });
                                }
                                function uncheckAll() {
                                    $('#batchClass').hide();
                                    $('input[type="checkbox"]').each(function () {
                                        $(this).attr('checked', false);
                                    });
                                }
                                function switchAll() {
                                    $('#batchClass').hide();
                                    $('input[type="checkbox"]').each(function () {
                                        $(this).attr('checked', !$(this).attr('checked'));
                                    });
                                }

                                function _focus(o) {
                                    var name;
                                    obj = o;
                                    name = obj.val();
                                    obj.removeAttr("readonly");
                                    obj.attr('class', 'editInput2');
                                    obj.select();
                                    obj.blur(function () {
                                        if (name != obj.val()) {
                                            _save(this);
                                        } else {
                                            obj.attr('class', 'editInput1');
                                            obj.attr('readonly', 'readonly');
                                        }
                                    });
                                }
                                function _save(obj) {
                                    $.post('/?s=seller/album/change_pic_name', {id: obj.id, name: obj.value}, function (data) {
                                        if (data == 'false') {
                                            showError('操作失败');
                                        } else {
                                            showDialog('操作成功', 'succ', null, null, null, null, null, null, null, 1);
                                        }
                                    });
                                    obj.className = "editInput1";
                                    obj.readOnly = true;
                                }
                                
                                function submit_form(type) {
                                    if (type != 'move') {
                                        $('#batchClass').hide();
                                    }
                                    var id = '';
                                    $('input[type=checkbox]:checked').each(function () {
                                        if (!isNaN($(this).val())) {
                                            id += $(this).val();
                                        }
                                    });
                                    if (id == '') {
                                        alert('请选择图片');
                                        return false;
                                    }
                                    if (type == 'del') {
                                        if (!confirm('您确定进行该操作吗?\n注意：使用中的图片也将被删除')) {
                                            return false;
                                        }
                                    }
                                    if (type == 'move') {
                                        $('#checkboxform').append('<input type="hidden" name="form_submit" value="ok" /><input type="hidden" name="cid" value="' + $('#cid').val() + '" />');
                                    }
                                    $('#checkboxform').attr('action', '/?s=seller/album/pic_' + type);
                                    ajaxpost('checkboxform', '', '', 'onerror');
                                }
                                function cover(id) {
                                    if ($('#aclass_cover').attr('src') != $('#img_' + id).attr('src')) {
                                        ajaxget('/?s=seller/album/change_album_cover&id=' + id);
                                    } else {
                                        showError('请不要重复设置相同的图片为相册封面！');
                                    }
                                }

                                $(function () {
                                    $("#img_sort").change(function () {
                                        $('#select_sort').submit();
                                    });
                                    $("#img_move").click(function () {
                                        if ($('#batchClass').css('display') == 'none') {
                                            $('#batchClass').show();
                                        } else {
                                            $('#batchClass').hide();
                                        }
                                    });
                                });
</script>
{/block}